<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>jQuery datePicker datePicker disabled demo</title>
		
		<!-- firebug lite -->
		<script type="text/javascript" src="firebug/firebug.js"></script>

        <!-- jQuery -->
		<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
        
        <!-- required plugins -->
		<script type="text/javascript" src="scripts/date.js"></script>
		<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->
        
        <!-- jquery.datePicker.js -->
		<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
        
        <!-- datePicker required styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/datePicker.css">
		
        <!-- page specific styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/demo.css">
        
        <!-- page specific scripts -->
		<script type="text/javascript" charset="utf-8">
            $(function()
            {
				$('.date-pick').datePicker();
				$('.dp-disable').bind(
					'click',
					function()
					{
						var $this = $(this);
						var whichInput = $this.attr('rel');
						var $dateInput = $('#date' + whichInput);
						var status = $dateInput.is('.dp-disabled');
						$dateInput.dpSetDisabled(!status);
						$this.text(
							(status ?
								'Disable' :
								'Enable'
							) + ' date ' + whichInput);
						this.blur();
						return false;
					}
				);
            });
		</script>
		
	</head>
	<body>
        <div id="container">
            <h1>jquery.datePicker example: disabling the datePicker</h1>
			<p><a href="index.html">&lt; date picker home</a></p>
            <p>
                The following example shows you how you can disable the date picker by calling dpSetDisabled on
				the relevant element. This disables the related input field (if there is one) and adds a class
				of dp-disabled to the date picker element and it's button (if there is an associated button)
            </p>
			<p><a href="noJs.html" class="dp-disable" rel="1">Disable date 1</a> or <a href="noJs.html" class="dp-disable" rel="2">Disable date 2</a></p>
			<form name="chooseDateForm" id="chooseDateForm" action="#">
				<fieldset>
					<legend>Test date picker form</legend>
                    <ol>
                        <li>
                            <label for="date1">Date 1:</label>
							<input name="date1" id="date1" class="date-pick" />
						</li>
                        <li>
                            <label for="date2">Date 2:</label>
							<input name="date2" id="date2" class="date-pick" />
						</li>
                        <li>
                            <label for="test-select">Test select:</label>
                            <select name="test-select" id="test-select" style="width: 170px">
                                <option value="1">Test SELECT </option>
                                <option value="2">Doesn't shine through</option>
                                <option value="3">Even in IE</option>
                                <option value="4">Yay!</option>
                            </select>
                        </li>
					</ol>
				</fieldset>
			</form>
			<h2>Page sourcecode</h2>
			<pre class="sourcecode">
 $(function()
{
	$('.date-pick').datePicker();
	$('.dp-disable').bind(
		'click',
		function()
		{
			var $this = $(this);
			var whichInput = $this.attr('rel');
			var $dateInput = $('#date' + whichInput);
			var status = $dateInput.is('.dp-disabled');
			$dateInput.dpSetDisabled(!status);
			$this.text(
				(status ?
					'Disable' :
					'Enable'
				) + ' date ' + whichInput);
			this.blur();
			return false;
		}
	);
});</pre>
			<h2>Page CSS</h2>
			<pre class="sourcecode">
/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}</pre>
        </div>
	</body>
</html>